<template>
  <div class="cashier-result-layout">
    <result :status="orderInfo.status">
      <template #sub-title>
        <span>{{ `${result}元` }}</span>
        <span v-show="orderInfo.sale" class="orig-price">{{ `${orderInfo.price.toFixed(2)}元` }}</span>
      </template>
    </result>

    <div class="container">
      <div class="info-item">
        <div class="label">商品名称</div>
        <div class="value">{{ orderInfo.name }}</div>
      </div>

      <div class="info-item">
        <div class="label">付款金额</div>
        <div class="value">{{ `${result}元` }}</div>
      </div>

      <div v-show="orderInfo.sale" class="info-item">
        <div class="label">优惠金额</div>
        <div class="value" :style="{ color: '#FF6669' }">{{ `${orderInfo.sale}元` }}</div>
      </div>

      <div class="info-item">
        <div class="label">商品单号</div>
        <div class="value">{{ orderInfo.productNo }}</div>
      </div>

      <div class="info-item">
        <div class="label">支付单号</div>
        <div class="value">{{ orderInfo.paymentNo }}</div>
      </div>
    </div>

    <action :status="orderInfo.status" />
  </div>
</template>

<script>
import Result from './Result'
import Action from './Action'

export default {
  components: {
    Result,
    Action
  },

  data() {
    return {
      orderInfo: {
        status: 'success',
        price: 324.23,
        sale: 35.12,
        name: '简历精修课',
        productNo: '12009912834700',
        paymentNo: '20012308718'
      }
    }
  },

  computed: {
    result() {
      const {
        orderInfo: { price, sale }
      } = this
      return (Number(price) - Number(sale)).toFixed(2)
    }
  }
}
</script>

<style lang="less" scoped>
.cashier-result-layout {
  padding: 5.5px 17px 0 17px;

  .orig-price {
    text-decoration: line-through;
    color: #999999;
    margin-left: 10px;
  }

  .container {
    padding: 19.5px 0;
    border-top: 0.5px solid #dddddd;

    .info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 500;
      line-height: 30px;

      .label {
        color: #999999;
      }

      .value {
        color: #666666;
      }
    }
  }
}
</style>